<template>
  <div class="index-container">
    <div class="shop-top">
      <div class="w1200">
        <div class="fr" ><router-link :to="`/shoplist`" title="融易装">
              <i class="el-icon-house" style="margin-right:5px;"></i>首页
            </router-link></div>
        <div class="fl">
          <div class="sn-quick-menu">
            <div class="login"><img v-if="info.logo"
                   :src="info.logo.path"
                   alt="">{{info.name?info.name:'暂未设置'}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <!-- <div class="sp-cart">客服服务
              <i class="el-icon-arrow-down"></i>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="header">
      <div class="headerLayout w1200">
        <div class="headerCon">
          <h1 class="mallLogo">
            <router-link :to="`/shoplist`"
                         title="融易装">
              <img src="../img/logo.png">
            </router-link>
          </h1>
          <div class="mallSearch">
            <form action=""
                  class="layui-form"
                  novalidate>
              <input type="text"
                     v-model="keyword"
                     class="layui-input"
                     placeholder="搜索关键字">
              <button class="layui-btn"
                      @click="filterPops()">
                <i class="el-icon-search"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="content content-nav-base commodity-content">

      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="category-types"
                 style="">
              <h3>全部分类</h3>
            </div>
            <div class="inner-cont2">
              <router-link :to="`/nowlist`">选材中心</router-link>
              <router-link :to="`/orderlist`">我的订单</router-link>
              <router-link :to="`/nowadderss`" class="active">地址管理</router-link>
              <router-link :to="`/nowcart`">购物车</router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="commod-cont-wrap"
           style="background:#f8f8f8;" v-loading="loading">
        <div class="commod-cont w1200 layui-clear">
          <div class="order-top">地址管理 <span style="float:right;font-weight: normal;cursor: pointer;" @click="gitadderss()"><i class="el-icon-plus"></i>新增地址</span></div>
          <div class="tablist">
            <div class="addressContainerMain">
              <table class="addressList">
                <tr class="mobile_hidden">
                  <th>收货人</th>
                  <th>电话/手机</th>
                  <th>所在地区</th>
                  <th>收货地址</th>
                  <th>操作</th>
                </tr>
                <tr class="addrCont" v-for="(item,index) in addressDatas.list" :key="index">
                  <td class="name_td">{{item.name}}</td>
                  <td class="phone_td">{{item.mobile}}</td>
                  <td class="area_td">{{item.province}} {{item.city}} {{item.area}}</td>
                  <td class="addr_td">{{item.address}} <span class="addr-default" v-if="item.is_default == 1">默认</span></td>
                  <td class="opreate_td"><span class="editBtn" @click="editAddress(item)">修改</span><span class="delBtn" @click="deleteAddress(item.id)">删除</span></td>
                </tr>
              </table>
              <div class="nocard" v-if="addressDatas.list.length == 0">
                <div class="divimg"><img src="../img/icon_gou.png"/></div>
                <span>暂无商品信息</span>
              </div>
            </div>
          </div>
     
        </div>
      </div>
    </div>
    <el-dialog
      :title="addtit"
      :visible.sync="dialogadders"
      width="900px"
      :before-close="handleClose">
      <div class="addersscont">
        <el-form ref="form" :model="form" label-position="left">
          <el-form-item label="收货姓名" label-width="80px">
              <el-input style="width:100%;" v-model="form.name" placeholder="请输入收货人姓名"></el-input>
            </el-form-item> 
            <el-form-item label="手机号码" label-width="80px">
              <el-input style="width:100%;" v-model="form.mobile" placeholder="请输入收货人手机号"></el-input>
            </el-form-item> 
           <el-form-item label="选择区域" label-width="80px">
              <el-select v-model="provinceObj" @change="select1" value-key="cityid" placeholder="请选择省份">
                <el-option
                v-for="item in province"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="cityObj" @change="select2" value-key="cityid" placeholder="请选择城市">
                <el-option
                v-for="item in city"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="districtObj" @change="select3" value-key="cityid" placeholder="请选择县区">
                <el-option
                v-for="item in district"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
            </el-form-item> 
            <el-form-item label="详细地址" label-width="80px">
              <el-input style="width:100%;" v-model="form.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item label="设为默认" label-width="80px">
              <el-radio v-model="form.is_default" label="1">是</el-radio>
            </el-form-item>    
        </el-form>       
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogadders = false">取 消</el-button>
        <el-button type="primary" v-if="address_id" @click="getedit()">保存修改</el-button>
        <el-button type="primary" v-else @click="getadd()">确 定</el-button>
      </span>
    </el-dialog>

    <div class="footer">
      <div class="ng-promise-box">
        <div class="ng-promise w1200">
          <p class="text">
            <a class="icon1"
               href="javascript:;">7天无理由退换货</a>
            <a class="icon2"
               href="javascript:;">送货上门</a>
            <a class="icon3"
               style="margin-right: 0"
               href="javascript:;">100%品质保证</a>
          </p>
        </div>
      </div>
      <div class="mod_help w1200">
        <!-- <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">行业资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p> -->
        <p class="coty">融易装版权所有 &copy; 2012-2020</p>
      </div>
    </div>

  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {
        name: '小刀',
        info: {},
        mobile: '',
        form: {
           name:"",
           mobile:'',
           address:'',
           is_default:0,
        },
        province:[],
        city:[],
        district:[],
        provinceObj:{},
        cityObj:{},
        districtObj:{},
        dialogadders:false,
        addressDatas:{
					loading:false,
					fail:false,
					list:[],
					index:0
				},
        tapIndex:1,
        addtit:'新增收货地址',
        addshowlist:false,
        loading: false,
        address_id:'',
        keyword:'',
      }
    },
    mounted() {
      this.info = JSON.parse(localStorage.getItem('info'))
      this.mobile = localStorage.getItem('mobile')
      this.getDataadd()
      this.getProvince()
    },
    methods: {
      gitadderss(){
          this.dialogadders = true
      },
      filterPops(){
        this.$router.push({name:'nowlist',query:{keyword:this.keyword}})
      },
       // 获取用户收货地址
      getDataadd() {
        this.$http.post('/api/admin/shopweb/address/lists', { }).then(res => {
         this.addressDatas.loading = true;
					this.addressDatas.fail = false;
					if(res.code == 1){
            this.addressDatas.loading = false;
            this.addressDatas.list = res.data;
					}else{
             this.$message({
                message: res.message,
                type: 'warning'
              })
						this.addressDatas.fail = true;
					}
        })
      },
      // 省份选择
        select1(){
            this.cityObj={}
            this.districtObj={}
            this.getCityList()
        },
        // 城市选择
        select2(){
            this.districtObj={}
            if(!this.provinceObj){
                this.$message.warning('请先选择省份')
                return
            }
            this.getAreaList()
        },
        // 县区选择
        select3(){
            if(!this.cityObj){
                this.$message.warning('请先选择城市')
                return
            }
        },
        // 获取省份
        getProvince(){
            this.$http.post('/api/admin/base/Region/getProvinceList').then(res=>{
                console.log(res,'省份');
                if(res.code==1){
                    this.province = res.data?res.data:[]
                }
            })
        },
        // 获取城市
        getCityList(city,area){
            this.$http.post('/api/admin/base/Region/getCityList',{province_id:this.provinceObj.cityid}).then(res=>{
                console.log(res,'城市列表');
                if(res.code==1){
                    this.city = res.data?res.data:[]
                    if(city){
                       this.cityObj =  this.city.find(val => val.city_name == city)
                       setTimeout(() =>{
                         this.getAreaList(area)
                       },150); 
                    }
                    
                }
            })
        },
        // 获取县区
        getAreaList(area){
            this.$http.post('/api/admin/base/Region/getDistrictList',{city_id:this.cityObj.cityid}).then(res=>{
                console.log(res,'县区列表');
                if(res.code==1){
                    this.district = res.data?res.data:[]
                    if(area){
                       this.districtObj = this.district.find(val => val.city_name == area)
                       setTimeout(() =>{
                          this.dialogadders = true
                          this.loading = false
                        },150);
                    }
                }
            })
        },
      isPhone(t) {
		        return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
		 },  
         // 新增地址
      getadd() {
        console.log(this.provinceObj,this.cityObj,this.areaObj)
        if(!this.form.name){
          this.$message.warning('请填写收货人名称') 
          return
        }
        if(!this.form.mobile){
          this.$message.warning('请填写收货人号码') 
          return
        }
        if(!this.isPhone(this.form.mobile)){
          this.$message.warning('号码格式不对') 
          return
        }
        if(!this.districtObj){
          this.$message.warning('请选择区域') 
          return
        }
        if(!this.form.address){
          this.$message.warning('请填写详细地址') 
          return
        }
        this.$http.post('/api/admin/shopweb/address/add', { 
           name: this.form.name,
           mobile: this.form.mobile,
           address: this.form.address,
           province: this.provinceObj.city_name,
           city:this.cityObj.city_name,
           area:this.districtObj.city_name,			
           is_default: this.form.is_default	
        }).then(res => {
          if(res.code == 1){
              this.$message.success('添加地址成功！')
              this.getDataadd() 
              this.dialogadders = false
          }else{
            this.$message.warning(res.msg)
            this.dialogadders = false
          }
         
         
        })
      },
         // 编辑地址
      getedit() {
        console.log(this.provinceObj,this.cityObj,this.areaObj)
        if(!this.form.name){
          this.$message.warning('请填写收货人名称') 
          return
        }
        if(!this.form.mobile){
          this.$message.warning('请填写收货人号码') 
          return
        }
        if(!this.isPhone(this.form.mobile)){
          this.$message.warning('号码格式不对') 
          return
        }
        if(!this.districtObj){
          this.$message.warning('请选择区域') 
          return
        }
        if(!this.form.address){
          this.$message.warning('请填写详细地址') 
          return
        }
        this.$http.post('/api/admin/shopweb/address/edit', { 
           name: this.form.name,
           mobile: this.form.mobile,
           address: this.form.address,
           province: this.provinceObj.city_name,
           city:this.cityObj.city_name,
           area:this.districtObj.city_name,			
           is_default: this.form.is_default,
           address_id:this.address_id
        }).then(res => {
          if(res.code == 1){
              this.$message.success('编辑地址成功！')
              this.getDataadd()
              this.address_id = '' 
              this.dialogadders = false
          }else{
            this.$message.warning(res.msg)
            this.dialogadders = false
          } 
        })
      },
      editAddress(item){
        this.loading = true
        this.addtit='编辑收货地址'
        this.address_id = item.id
        this.form.name = item.name
        this.form.mobile = item.mobile
        this.form.address = item.address
        this.form.is_default	= item.is_default
        this.provinceObj = this.province.find(val => val.city_name == item.province)
        this.getCityList(item.city,item.area)
      },
      deleteAddress(id){
        this.$confirm('确认删除该地址? 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
               this.$http.post('/api/admin/shopweb/address/del', { 
                    address_id_lst:id
                }).then(res => {
                  if (res.code == 1) {
										this.getDataadd()
									}
                })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      },
    }
  }
</script>
<style lang="less" scoped>
  & /deep/ .content {
    padding: 0 !important;
  }
  @import "../css/index.less";
</style>
